<template>
  <div id="app">
    <div class="organizer-panel-wrapper">
      <div>
        <el-button type="primary" @click="saveGraph" round>保存</el-button>
      </div>
      <el-container class="organizer-container">
        <logic-panel
          class="logic-panel-wrapper"
          :context="context"
          :info="info"
          ref="lp"
        ></logic-panel>
      </el-container>
    </div>
  </div>
</template>

<script>
import './index.less'
import Context from './context'
import LogicPanel from "./components/LogicPanel.vue";
import {saveOrUpdate, getById} from "@/api/logicArrange";
import {getQueryVariable} from "@/util/Utils";

export default {
  name: "LogicSetter",
  data() {
    return {
      context: null,
      info: undefined,
    };
  },
  components: { LogicPanel },

  created() {
    this.initData();
  },
  methods: {

    initData(){
      const arrangeId = getQueryVariable('arrangeId');
      if (arrangeId) {
        window.localStorage.setItem('arrangeId', arrangeId)
        getById(arrangeId).then(res => {
          if (res.code === '0' && res.data) {
            this.context = new Context({ logicList: [JSON.parse(res.data)] });
          } else {
            this.context = new Context({ logicList: [] })
          }
        })
      } else {
        this.context = new Context({ logicList: [] })
      }
    },
    saveGraph() {
      const graphData = this.$refs.lp.graph.getGraphRawData();
      const arrangeId = window.localStorage.getItem('arrangeId')
      saveOrUpdate(JSON.stringify(graphData), arrangeId).then(res => {
        if (res.code === '0') {
          this.$message.success('保存成功');
          window.localStorage.setItem('arrangeId', res.data)
        }
      })
    },
  },
};
</script>

<style>
@import "./assets/base.css";

#app {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

.organizer-panel-wrapper {
  width: 100%;
  height: 100%;
  background: #eaecef;
  border: 1px solid #ccc;
}

.organizer-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
